<link rel="stylesheet" href="/assets/home/plugins/citypicker/css/city-picker.css">
<link rel="stylesheet" href="/assets/home/css/profile.css">

<script src="/assets/home/plugins/citypicker/js/city-picker.data.min.js"></script>
<script src="/assets/home/plugins/citypicker/js/city-picker.min.js"></script>

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">基本资料</h1>
</header>

<div class="user">
    <div class="avatar wow fadeInUp">
        <img src="{$auth.avatar_cdn}" />
    </div>
</div>

<form class="mui-input-group" method="post" enctype="multipart/form-data">
    <div class="mui-input-row">
        <label>昵称：</label>
        <input type="text" name="nickname" class="mui-input-clear" value="{$auth.nickname}" placeholder="请输入昵称">
    </div>
    <div class="mui-input-row">
        <label>手机号码：</label>
        <input type="text" name="mobile" class="mui-input-clear" value="{$auth.mobile}" placeholder="请输入手机号码">
    </div>
    <div class="mui-input-row">
        <label>邮箱：</label>
        <input type="email" name="email" class="mui-input-clear" value="{$auth.email}" placeholder="请输入邮箱">
    </div>
    <div class="mui-input-row">
        <label>密码：</label>
        <input type="password" name="password" class="mui-input-password" placeholder="密码为空即不修改">
    </div>
    <div class="mui-input-row">
        <label>性别：</label>
        <select name="gender">
            <option value="0" {$auth.gender==0 ? 'selected' : '' }>保密</option>
            <option value="1" {$auth.gender==1 ? 'selected' : '' }>男</option>
            <option value="2" {$auth.gender==2 ? 'selected' : '' }>女</option>
        </select>
    </div>
    <div class="mui-input-row region">
        <label>地区：</label>
        <div class="citypicker">
            <input id="city" type="text" data-toggle="city-picker" name="region"
                value="{$auth.district ? $auth.district : ($auth.city ? $auth.city : $auth.province)}" readonly />
            <input type="hidden" name="code" id="code"
                value="{$auth.district ? $auth.district : ($auth.city ? $auth.city : $auth.province)}">
        </div>
    </div>

    <input type="file" class="form-control" id="avatar" name="avatar" style="display: none;" />

    <div class="mui-button-row">
        <button type="submit" class="mui-btn mui-btn-primary">确认</button>
    </div>
</form>


<script>
    //选择头像
    $('.avatar').click(function () {
        $('#avatar').click()
    })

    //给Input元素绑定一个改变的事件
    $('#avatar').change(function () {
        //将拿到的图片，转换为本地的图片结构，进行显示

        //选择的图片
        var file = $(this)[0].files[0]

        //创建一个文件读取器对象
        var reader = new FileReader()

        //让这个对象去读取上面的文件
        reader.readAsDataURL(file)

        //绑定一个事件，读取成功后拿到结果的事件
        reader.onload = function (ev) {
            //把base64的数据 渲染上去
            $(".avatar img").attr('src', ev.target.result)
        }
    });


    // 选择地区
    $("#city").on("cp:updated", function () {
        var citypicker = $(this).data("citypicker");
        var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");
        $("#code").val(code);
    });
</script>